<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>商品详情</title>
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <script src="../js/flexible.js" type="text/javascript"></script>
    <script src="../js/swiper.min.js" type="text/javascript"></script>
    <script src="../js/zepto-v1.2.0.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="goods-detail-wrapper">
      <section class="swiper-container">
        <a class="detail-back" href="javascript:history.back(-1)"></a>
        <div class="swiper-wrapper">
          <div class="swiper-slide slide1"></div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
        </div>
        <div class="swiper-pagination"></div>
      </section>
      <section class="price-container">
        <div class="current-price">
          <span class="currency">￥</span>
          <span class="money">320</span>
        </div>
        <div class="prev-price">￥1000</div>
      </section>
      <section class="goods-info-container">
        <div class="title">通航运行管理系统</div>
        <div class="goods-info">
          <div class="company">通航云有限公司</div>
          <div class="stock-info">
            <span class="stock">库存数量：5件</span>
            <span class="shipment-place">发货地：山东</span>
          </div>
          <div class="desc">
            负责动力测试的发动机、桨叶的安装，调试，测试等工作；负责动力系统总装的发动机、螺旋桨的安装，调试，测试等工作；合作解决动力装置可能遇到的问题；试飞时动力系统的机上调试工作。负责动力测试的发动机、桨叶的安装，调试，测试等工作；负责动力系统总装的发动机、螺旋桨的安装，调试，测试等工作；合作解决动力装置可能遇到的问题；试飞时动力系统的机上调试工作。负责动力测试的发动机、桨叶的安装，调试，测试等工作；负责动力系统总装的发动机、螺旋桨的安装，调试，测试等工作；合作解决动力装置可能遇到的问题；试飞时动力系统的机上调试工作。负责动力测试的发动机、桨叶的安装，调试，测试等工作；负责动力系统总装的发动机、螺旋桨的安装，调试，测试等工作；合作解决动力装置可能遇到的问题；试飞时动力系统的机上调试工作。
          </div>
        </div>
        <div class="attachment-list">
          <div class="attachment-item">
            <span class="title">附件文件</span>
            <span class="size">20.3M</span>
            <span class="download">下载</span>
          </div>
          <div class="attachment-item">
            <span class="title">附件文件</span>
            <span class="size">20.3M</span>
            <span class="download">下载</span>
          </div>
          <div class="attachment-item">
            <span class="title">附件文件</span>
            <span class="size">20.3M</span>
            <span class="download">下载</span>
          </div>
        </div>
        <div class="declaration">
          <label>免责声明</label>
          <div class="content">
            由于疫情影响，物流可能将会延期。由于疫情影响，物流可能将会延期。由于疫情影响，物流可能将会延期。
          </div>
        </div>
      </section>
      <div class="purchase-container">
        <div class="counter">
          <span class="minus">-</span>
          <span class="count">1</span>
          <span class="add">+</span>
        </div>
        <div class="action-wrapper">
          <div class="add-shopping-cart normal-btn primary-btn">加入购物车</div>
          <div class="pay normal-btn">立即支付</div>
        </div>
      </div>
    </div>
  </body>
  <script>
    $(document).ready(function () {
      var mySwiper = new Swiper('.swiper-container', {
        loop: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
        },
      })
      let currentCount = Number($('.count').html())
      const disabledFunc = () => {
        if (currentCount === 1) {
          $('.minus').addClass('disabled')
        } else {
          $('.minus').removeClass('disabled')
        }
      }
      disabledFunc()
      $('.add').click(function () {
        currentCount += 1
        $('.count').html(currentCount)
        disabledFunc();
      })
      $('.minus').click(function () {
        currentCount -= 1
        $('.count').html(currentCount)
        disabledFunc();
      })
    })
  </script>
</html>
